import React, { Component } from 'react';

import { Dimensions, View } from 'react-native';

import F2Canvas from './src';
import F2 from '@antv/f2';

class App extends Component {
    width = Dimensions.get("window").width;
    height = this.width - 100;

    componentDidMount() {
        setTimeout(() => {
            this.draw();
        }, 20);
    }

    draw = () => {
        const data = [
            { name: '芳华', percent: 0.4, a: '1' },
            { name: '妖猫传', percent: 0.2, a: '1' },
            { name: '机器之血', percent: 0.18, a: '1' },
            { name: '心理罪', percent: 0.15, a: '1' },
            { name: '寻梦环游记', percent: 0.05, a: '1' },
            { name: '其他', percent: 0.02, a: '1' }
        ];
        const chart = new F2.Chart({
            el: this.$canvas.canvas,
            width: this.width,
            height: this.height,
        });
        chart.source(data, {
            percent: {
                formatter: val => {
                    return val * 100 + '%';
                }
            }
        });
        chart.legend({
            position: 'right'
        });
        chart.coord('polar', {
            transposed: true,
            radius: 0.85
        });
        chart.axis(false);
        chart.interval()
            .position('a*percent')
            .color('name', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
            .adjust('stack')
            .style({
                lineWidth: 1,
                stroke: '#fff',
                lineJoin: 'round',
                lineCap: 'round'
            });

        chart.render();
    }

    render() {
        return (
            <F2Canvas ref={e => this.$canvas = e} style={{ width: this.width, height: this.height }} />
        );
    }
}

export default App;